import './jybg.scss'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons'

function Jybg() {
  const navigate = useNavigate()
  return (
    <div className='jybg'>
        <div className='jybg-top'>
            <span>{<LeftOutline className='jybg-top-left' onClick={() => navigate(-1)}></LeftOutline>}</span>
            <span className='jybg-top-title'>检验报告详情</span>
        </div>
        <div className='jybg-bg'>
            <div className='report-title'>血常规 (成人)</div>
            <div className='patient-name'>王小美 女 28岁</div>
            <div className='report-details'>
                <div className='info-row'>
                    <span className='label'>送检医师:</span>
                    <span className='value'>王小美</span>
                    <span className='label-right'>送检科室:</span>
                    <span className='value-right'>门诊化验科</span>
                </div>
                <div className='info-row'>
                    <span className='label'>送检时间:</span>
                    <span className='value'>2020-01-01 10:20:36</span>
                </div>
                <div className='info-row'>
                    <span className='label'>报告时间:</span>
                    <span className='value'>2020-01-20 20:20:30</span>
                </div>
                <div className='info-row'>
                    <span className='label'>报告类别:</span>
                    <span className='value'>门诊/住院</span>
                </div>
            </div>
        </div>
        <div className='jybg-bottom'>
            <div className='test-results-header'>
                <div className='test-title'>检验结果</div>
                <div className='copy-link'>申请检验复印 {<RightOutlined />}</div>
            </div>
            <div className='legend'>
                <div className='legend-item'>
                    <div className='legend-icon red-square'></div>
                    <span>异常指标</span>
                </div>
                <div className='legend-item'>
                    <div className='legend-icon arrow-up'>↑</div>
                    <span>指标偏高</span>
                </div>
                <div className='legend-item'>
                    <div className='legend-icon arrow-down'>↓</div>
                    <span>指标偏低</span>
                </div>
            </div>
            <div className='results-table'>
                <div className='table-header'>
                    <div className='header-cell'>项目名称</div>
                    <div className='header-cell'>结果</div>
                    <div className='header-cell'>参考值</div>
                </div>
                <div className='table-row'>
                    <div className='table-cell'>无机磷酸盐</div>
                    <div className='table-cell'>1.25 (mmol/L)</div>
                    <div className='table-cell'>&lt;0.0</div>
                </div>
                <div className='table-row'>
                    <div className='table-cell'>降钙素原测定</div>
                    <div className='table-cell'>0.27 (ng/ml)</div>
                    <div className='table-cell'>&lt;0.0</div>
                </div>
                <div className='table-row'>
                    <div className='table-cell'>高敏C反应蛋白</div>
                    <div className='table-cell abnormal'>5.48 (mg/L)↑</div>
                    <div className='table-cell'>&lt;3.00</div>
                </div>
            </div>
        </div>
        <div className='jybg-bottom2'>
            <div className='personnel-info'>
                <div className='personnel-row'>
                    <span className='personnel-label'>检测人:</span>
                    <span className='personnel-value'>李医生</span>
                    <span className='personnel-label-right'>审核人:</span>
                    <span className='personnel-value-right'>王医生</span>
                </div>
                <div className='disclaimer'>
                    备注:此结果仅作参考,以医院纸质报告为准。
                </div>
            </div>
        </div>
    </div>
  )
}

export default Jybg